<!--
 * @Description: 百世物流单
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-08-15 16:35:19
 * @FilePath: /yuxiuproweb/src/views/transport/logisticsOrder/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="90vw"
    append-to-body
  >
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      height="64vh"
      border
      @cell-dblclick="celldblclick"
    >
      <el-table-column type="selection" width="55" align="center" />
      <template v-for="(i, index) in tableForm.item">
        <el-table-column
          :key="index"
          :prop="i.itemcode"
          :columnKey="i.itemcode"
          :label="i.itemname"
          :align="i.aligntype ? i.aligntype : 'center'"
          :min-width="i.minwidth"
          :show-overflow-tooltip="i.overflow ? true : false"
          :sortable="i.sortable ? true : false"
          :width="!!i.width ? i.width : ''"
          :fixed="i.fixed"
          v-if="i.displaymark ? true : false"
        >
          <template slot-scope="scope">
            <div v-if="i.itemcode == 'createtime'">
              <span>{{ scope.row[i.itemcode] | dateFormat }}</span>
            </div>
            <div v-else-if="i.itemcode == 'num' || i.itemcode == 'length'">
              <el-input
                v-if="scope.row[i.itemcode + 'input']"
                v-model="scope.row[i.itemcode]"
                size="small"
                placeholder=""
                @blur="saveInput(scope.row, scope.$index, i.itemcode)"
                @keyup.enter.native="
                  saveInput(scope.row, scope.$index, i.itemcode)
                "
              />
              <span v-else>{{ scope.row[i.itemcode] }}</span>
            </div>
            <div v-else-if="i.itemcode == 'postageModeOfPayment'">
              <span v-if="scope.row[i.itemcode] == 0">寄付</span>
              <span v-else-if="scope.row[i.itemcode] == 1">到付</span>
              <span v-else>包邮</span>
            </div>
            <span v-else>{{ scope.row[i.itemcode] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存 上 传</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { tableItem } from "./tablecolums.js";
import commonMix from "@/utils/mixins/common";
export default {
  mixins: [commonMix],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // 表单参数
      list: [],
      selRow: [],
      loading: false,
      tableForm: tableItem,
      row_Val: "",
    };
  },
  computed: {
    title() {
      return {
        add: "生成百世物流单",
        edit: "生成百世物流单",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    this.getList();
  },
  methods: {
    /** 获取详情 */
    getList() {
      this.list = [...this.data];
    },

    /** 提交按钮 */
    submitForm() {
      console.log("提交", this.form);
    },
    handleSelectionChange(row) {
      this.selRow = row;
    },
    // 双击单元格事件
    celldblclick(row, column, cell, event) {
      if (column.columnKey == "num" || column.columnKey == "length") {
        if (
          this.$store.getters.roles.includes("toorder") ||
          this.$store.getters.roles.includes("admin")
        ) {
          this.$set(row, column.columnKey + "input", true);
          this.row_Val = JSON.stringify(row[column.columnKey]);
        }
      }
    },
    saveInput(row, rowIndex, code) {
      this.$set(row, code + "input", false);
      if (JSON.stringify(row[code]) == this.row_Val) {
        return;
      }
      //   updateTaskOrder(row)
      //     .then((res) => {
      //       this.$modal.msgSuccess(res.msg || "操作成功");
      //     })
      //     .then(() => {
      //       getTaskOrder(row.productionTaskId).then((resdata) => {
      //         if (resdata.code == 200) {
      //           this.recordList[rowIndex] = resdata.data;
      //           this.recordList = [
      //             ...this.getSpanArr(this.recordList, "number", "dealRowSpan"),
      //           ];
      //         }
      //       });
      //     });
    },
  },
  filters: {
    dateFormat(dataStr) {
      if (!dataStr) {
        return;
      }
      var dt = new Date(dataStr);
      var y = dt.getFullYear();
      var m = (dt.getMonth() + 1).toString().padStart(2, "0");
      var d = dt.getDate().toString().padStart(2, "0");
      var hh = dt.getHours().toString().padStart(2, "0");
      var mm = dt.getMinutes().toString().padStart(2, "0");
      var ss = dt.getSeconds().toString().padStart(2, "0");
      return `${y}-${m}-${d}`;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
